<template>
    <div class="img-component" @scroll="loadMore">
        <div class="im-wrap-container">
            <div class="img-preview-top">
                <div class="top-bar">
                    <a class="top-back" @click="handleClose"></a>
                    <div class="right-funs">
                        <div class="rfwrap">
                            <a class="btn clear-redborder" @click="showOuterBox = !showOuterBox"
                                v-if="info.ratios && info.ratios.length > 0">{{ showOuterBox ? '去除' : '显示' }}红框</a>
                            <a class="btn bw-preview" @click="isWbPreview = !isWbPreview">黑白模式</a>
                            <a class="btn img-search-to-img" @click="handlXsSearch">找相似</a>
                            <a class="btn download" @click="handleDownload">下载</a>
                            <a class="btn like-btn" :class="{ 'active': info.praiseCount > 0 }"
                                @click="handlePraise">喜欢<i>({{ info.praise ? info.praise : 0 }})</i></a>
                            <a class="fav-btn" @click="handleShowFav">收藏</a>
                            <div class="game-n-u-visit img-nu-visit" v-if="showFnew">
                                <div class="nv-content">
                                    <div class="nv-content-l">
                                        <span>「点这里，可以收藏哦」</span>
                                        <span>创建灵感库，随时随地查看</span>
                                    </div>
                                    <a class="n-u-v-close" @click="handlCloseTop"></a>
                                </div>
                                <div class="cursor" @click="handlCloseTop(); handleShowFav();"></div>
                            </div>
                        </div>
                        <a class="close-modal-page" @click="handleClose"><i class="el-icon-close"></i></a>
                    </div>
                </div>
                <div class="b-img-box">
                    <div class="im-wrap" :class="{ 'hidden-rparea': !showRight, 'show': showRight }">
                        <div class="left-m-img " :class="{ 'greyscalefilter': isWbPreview, 'no-data': !info.id }"
                            @click="handleClose">
                            <div class="img-colors" v-if="info.color && info.color.length > 0">
                                <el-tooltip placement="top" v-for="(clr, clx) in info.color" :key="clx" :content="clr"
                                    v-if="clx < 10">
                                    <a @click.stop="toSearchByColor(clr)" :style="{ backgroundColor: clr }"></a>
                                </el-tooltip>
                            </div>
                            <div class="img-wrap" v-if="info.id">
                                <div class="n-box">
                                    <img loading="lazy" @click.stop="handleshowViewer" :src="viewImgUrl" alt="">
                                    <template v-if="info.ratios && info.ratios.length > 0 && showOuterBox">
                                        <div v-for="(ot, otx) in info.ratios" :key="'rto-' + otx"
                                            :style="'width:' + ot.rw + '%;height:' + (ot.rh < 0 ? Math.abs(ot.rh) + 5 : ot.angle != 0 ? ot.rh + 5 : ot.rh) + '%;left:' + ot.rleft + '%;top:' + ot.rtop + '%;' + (ot.angle != 0 ? 'transform:rotate(' + ot.angle + 'deg);transform-origin: top left;' : '')"
                                            class="outer-box">

                                        </div>
                                    </template>
                                </div>
                            </div>
                            <vue-danmaku ref="refDmCmt" v-model="comments" :speeds="100" :randomChannel="true" loop
                                use-slot>
                                <template slot="dm" slot-scope="{ index, danmu }">
                                    <div v-html="danmu.content"></div>
                                </template>
                            </vue-danmaku>
                            <!-- <div class="dm-text" v-for="(item,idx) in comments">{{item.content}}</div> -->
                            <!-- <div class="dm-text">自有属于它的意义</div>
                            <div class="dm-text">好精致，喜欢～</div> -->
                        </div>
                        <div class="r-propertys">
                            <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                <i class="sm-tip" slot-content>查看此游戏所有图片</i>
                                <a slot="reference" class="title" :href="'/game/' + info.article.id" target="_blank">{{
                                    info.article.title }} <i class="cir"></i> </a>
                            </el-popover>
                            <div class="cate" v-if="info.article">
                                <a :href="'/games?cat=' + info.article.categoryId" target="_blank">{{ info.article.categoryName }}</a>
                                <template v-if="info.articleStyle">/<a :href="'/games?style=' + info.articleStyle" target="_blank">{{ info.articleStyle }}</a></template>
                                <template v-if="info.articleDevice">/<a :href="'/games?dev=' + info.articleDevice" target="_blank">{{ info.articleDevice }}</a></template>
                            </div>
                            <div class="tag-tit">
                                <div class="text">智能标签</div>
                                <!-- <el-popover placement="bottom" trigger="click" popper-class="img-tag-pop" v-if="info.member&&info.member.id==userId">
                                    <div class="ag-tags">
                                        <div class="label">最近标签</div>
                                        <div class="tags">
                                            <a @click="tagVal='排行榜'">排行榜</a>
                                            <a @click="tagVal='木头'">木头</a>
                                            <a @click="tagVal='纸张'">纸张</a>
                                            <a @click="tagVal='暂停'">暂停</a>
                                            <a @click="tagVal='招募'">招募</a>
                                        </div>
                                    </div>
                                    <form onsubmit="return false;" class="att-new-tags" slot="reference">
                                        <input type="text" autocomplete="off" v-model="tagVal"/>
                                        <a class="btn" @click="handleAppendTag">确定</a>
                                    </form>
                                </el-popover> -->
                                <div class="tags-wrap">
                                    <div class="tags-box">
                                        <!-- <el-tooltip placement="top" v-for="(tag, clx) in info.tagsArray" :key="clx" :content="tag">
                                            <a target="_blank" :href="'/searchs?k='+tag+'&t=articleImage'" v-if="tag!='--'">{{ tag }}</a>
                                        </el-tooltip> -->
                                        <a v-for="(tag, clx) in info.tagsArray" :key="clx" target="_blank"
                                            :href="'/searchs?k=' + tag + '&t=articleImage'" :title="tag" v-if="tag != '--'">{{
                                            tag }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <template v-if="olist && olist.length > 0">
                        <button class="img-prev" @click="imgPrev"></button>
                        <button class="img-next" @click="imgNext"></button>
                    </template>


                    <div class="ft-visit" v-if="isFirstVisit">
                        <div class="text">滑动“鼠标滚轮”查看更多视觉相似结果</div>
                        <a class="i-know" @click="handleIknow">我知道了</a>
                    </div>

                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                        <i class="sm-tip" slot-content>{{ showRight ? '关闭边栏' : '打开边栏' }}</i>
                        <a slot="reference" class="collapse-img-rbar" @click="handleShowRight"></a>
                    </el-popover>
                </div>
                <div class="face-area">
                    <div class="l-face-area">
                        <div class="img-comment-area" v-if="showDmArea">
                            <div class="dm-win-head">
                                弹幕<a class="close" @click="showDmArea = false;"></a>
                            </div>
                            <div class="img-dm-winwrap">
                                <!-- <div class="more-row" v-if="commentTotal>1">
                                    <a class="more-btn" @click="showMoreCmt=true" v-if="!showMoreCmt">显示 {{commentTotal}} 条所有弹幕</a>
                                    <a class="more-btn collapsed" @click="showMoreCmt=false" v-if="showMoreCmt">显示较少</a>
                                </div> -->
                                <div class="cmts">
                                    <div class="item" v-for="(item, idx) in comments" :key="idx">
                                        <a :href="'/user/' + item.member.id" target="_blank">
                                            <img loading="lazy"
                                                v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 34, name: item.member.userName }">
                                        </a>
                                        <div class="basic-r">
                                            <div class="tp">
                                                <div class="ltp">
                                                    <a :href="'/user/' + item.member.id"
                                                        target="_blank">{{ item.member.userName }}</a><span
                                                        class="tim">{{ item.intervalTimeStr }}</span>
                                                </div>
                                                <a class="cmt-del" v-if="currentUser && currentUser.id == item.member.id"
                                                    @click="delIdx = idx; showDel = true;"></a>
                                            </div>
                                            <div class="con" v-html="item.content"></div>
                                        </div>
                                    </div>

                                    <Empty class="comment-empty img-comment" text="等待你的精彩点评～"
                                        v-if="comments.length == 0" />
                                </div>
                            </div>
                        </div>
                        <div class="send-mbox">
                            <span class="u-img">
                                <img loading="lazy"
                                    v-aimgd="{ avatar: currentUser.avatar, id: currentUser.id, w: 34, name: currentUser.userName }">
                            </span>
                            <form onsubmit="return false;" class="right">
                                <!-- <p class="custom-inner-input" id="imgCommentVal" contenteditable="true"></p> -->
                                <input type="text" id="imgCommentVal" autocomplete="off"
                                    @keypress.enter="handleAddComment" v-model="commentVal" placeholder="说说你的第一感受...">
                                <div class="opbtns">
                                    <Face txtId="imgCommentVal" :offset="80" mod="topsend"
                                        @change="(val) => { commentVal = val; }" />
                                    <!-- <a class="send-btn" @click="handleAddComment"></a> -->
                                    <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                                        <i class="sm-tip" slot-content>按 Enter 键发送</i>
                                        <a slot="reference" class="send-btn" @click="handleAddComment"></a>
                                    </el-popover>
                                </div>
                            </form>
                            <div class="dm-btns">
                                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                                    <i class="sm-tip" slot-content>{{ isStop ? '开启弹幕' : '关闭弹幕' }}</i>
                                    <a slot="reference" class="open" :class="{ 'active': !isStop }" @click="handleOp"></a>
                                </el-popover>
                                <a class="view-dm-win" @click="showDmArea = !showDmArea">已装填 {{ comments.length }} 条弹幕</a>
                            </div>
                        </div>
                        <div class="face-con">
                            <el-popover popper-class="emo-info-pop" placement="top" trigger="hover">
                                <span class="emo-s-tip" slot-content>
                                    <i class="text">赞一个</i>
                                    点击反应
                                </span>
                                <a slot="reference" :class="{ 'active': emdata.em1.praiseCount > 0 }"
                                    @click="(e) => { handleEmoj(e, 1) }"><i class="icon emoj-18"></i><i
                                        class="num count">{{ emdata.em1.num > 0 ? emdata.em1.num : '' }}</i></a>
                            </el-popover>

                            <el-popover popper-class="emo-info-pop" placement="top" trigger="hover">
                                <span class="emo-s-tip" slot-content>
                                    <i class="text">满分王</i>
                                    点击反应
                                </span>
                                <a slot="reference" :class="{ 'active': emdata.em2.praiseCount > 0 }"
                                    @click="(e) => { handleEmoj(e, 2) }"><i class="icon emoj-10"></i><i
                                        class="num count">{{ emdata.em2.num > 0 ? emdata.em2.num : '' }}</i></a>
                            </el-popover>
                            <el-popover popper-class="emo-info-pop" placement="top" trigger="hover">
                                <span class="emo-s-tip" slot-content>
                                    <i class="text">爱了哦</i>
                                    点击反应
                                </span>
                                <a slot="reference" :class="{ 'active': emdata.em3.praiseCount > 0 }"
                                    @click="(e) => { handleEmoj(e, 3) }"><i class="icon emoj-16"></i><i
                                        class="num count">{{ emdata.em3.num > 0 ? emdata.em3.num : '' }}</i></a>
                            </el-popover>
                            <el-popover popper-class="emo-info-pop" placement="top" trigger="hover">
                                <span class="emo-s-tip" slot-content>
                                    <i class="text">绷不住</i>
                                    点击反应
                                </span>
                                <a slot="reference" :class="{ 'active': emdata.em4.praiseCount > 0 }"
                                    @click="(e) => { handleEmoj(e, 4) }"><i class="icon emoj-6"></i><i
                                        class="num count">{{ emdata.em4.num > 0 ? emdata.em4.num : '' }}</i></a>
                            </el-popover>
                            <el-popover popper-class="emo-info-pop" placement="top" trigger="hover">
                                <span class="emo-s-tip" slot-content>
                                    <i class="text">看戏了</i>
                                    点击反应
                                </span>
                                <a slot="reference" :class="{ 'active': emdata.em5.praiseCount > 0 }"
                                    @click="(e) => { handleEmoj(e, 5) }"><i class="icon emoj-24"></i><i
                                        class="num count">{{ emdata.em5.num > 0 ? emdata.em5.num : '' }}</i></a>
                            </el-popover>
                        </div>
                    </div>
                    <div class="author-info" v-if="info.member">
                        <a class="img-box" :href="'/user/' + info.member.id" target="_blank">
                            <img loading="lazy" v-aimgd="{ avatar: info.member.avatar, id: info.member.id, w: 40, name: info.member.userName }">
                        </a>
                        <a class="user" :href="'/user/' + info.member.id" target="_blank">
                            <span class="name">{{ info.member.userName }}</span>
                            <span class="collect-tip">添加于 {{ info.intervalTimeStr }}</span>
                        </a>
                    </div>
                </div>
                <div class="scroll-tip-area">
                    滚动浏览
                </div>
            </div>
            <div class="other-tit">更多相似</div>
            <ul class="mk-rd-datas">
                <WaterfallFlowImgList id="2" :list="list" :columns="6" :isxscallback="true" @choose="onXsChoose" :defaultw="414"/>
                <div class="no-more-text" v-if="!hasMore && !isloading && list.length > 0">没有更多了</div>
                <div class="pro-bot-loading" v-if="isloading">
                    <i class="el-icon-loading"></i>
                </div>
            </ul>
            <UnLoginMask />

            <Fbar class="img-detail-fbar" v-show="showFbar" @scrollchange="toTop" />
        </div>


        <ViewImg :url="viewImgUrl" @close="showViewer = false" v-if="showViewer" @changepage="changePage" />

        <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
            <Fav favmodule="IMG" @close="showFav = false" :foldertype="0" :imgids="favIds" @favsucc="onFavSucc" />
        </a-modal>

        <a-modal v-model="showDel" destroyOnClose centered :footer="null" :closable="false" width="366px">
            <div class="fav-component">
                <div class="fav-header">
                    系统提示
                </div>
                <div class="folder-con" style="margin-top:30px;text-align:center;font-size:14px;">
                    确定要删除？
                </div>
                <div class="btns m-widbtns">
                    <a class="pro-default-btn" @click="showDel = false">取消</a>
                    <a class="pro-confirm-btn" @click="handleConfirmDel">确认</a>
                </div>
            </div>
        </a-modal>
        <div class="animation-container"></div>
    </div>
</template>

<script>
import Empty from '@/components/Empty'
import vueDanmaku from 'vue-danmaku'
import UnLoginMask from '@/components/UnLoginMask'
import Fbar from '@/components/FBar'
import ViewImg from '@/components/viewImg'
import Fav from '@/components/Fav'
import Face from '@/components/face'
import WaterfallFlowImgList from '@/components/WaterfallFlowImgList'
import api from '@/api/api'
export default {
    data() {
        return {
            showFnew: false,
            delIdx: -1,
            showDel: false,
            showDmArea: false,
            showRight: true,
            isStop: false,
            isFirstVisit: false,
            isloading: true,
            showLoginNum: 0,
            showFbar: false,
            commentTotal: 0,
            isUseSelfSource: false,
            currentUser: {},
            showMoreCmt: false,
            comments: [],
            emEnum: {
                1: '[em_21]',
                2: '[em_16]',
                3: '[em_6]',
                4: '[em_19]',
                5: '[em_18]'
            },
            emdata: {
                em1: { praiseCount: 0 },
                em2: { praiseCount: 0 },
                em3: { praiseCount: 0 },
                em4: { praiseCount: 0 },
                em5: { praiseCount: 0 }
            },
            userId: '',
            favIds: [],
            tagVal: '',
            showFav: false,
            commentVal: '',
            viewdata: {},
            showViewer: false,
            viewImgUrl: '',
            isWbPreview: false,
            showOuterBox: true,
            scrollLoaded: true,
            hasMore: true,
            curImgId: '',
            imgParams: {
                page: 1, pageSize: 30,
                last: '', similar: ''
            },
            list:[],
            info: {
                member: {},
                color: [],
                tagsArray: [],
                article: {

                },
                praise: 0,
                ratios: []
            },
            ratio: 100,
            themes: ['zdx-vmask-theme-one', 'zdx-vmask-theme-two', 'zdx-vmask-theme-three', 'zdx-vmask-theme-four'],
            ratios: [9, 10, 20, 33, 50, 75, 100, 125, 150, 200, 275, 375, 500, 700, 1000],
            showIndex: 0,
            rotate: 0,
            isAdpt: true,
            themeBg: 'zdx-vmask-theme-two',
            viewImgUrl: '',

            fullScPraiseParam: {
                isAnimating: false,
                lastTime: 0,
                CONFIG: {
                    particleCount: {
                        mobile: 15,
                        tablet: 20,
                        desktop: 25
                    },
                    cooldown: 1500
                }
            },
        }
    },
    components: {
        WaterfallFlowImgList, Face, Fav, ViewImg, Fbar, UnLoginMask, vueDanmaku, Empty
    },
    watch: {
        imgid() {
            if (this.imgid && this.imgurl) {
                this.initQuery();
            }
        }
    },
    props: ['imgid', 'imgurl', 'olist', 'viewidx'],
    methods: {
        changePage(_dir) {
            if (_dir == 'prev') {
                this.imgPrev();
            } else {
                this.imgNext();
            }
        },
        createMixedAnimation() {
            const container = document.querySelector('.animation-container');
            const icons = ['👍', '💯', '❤️', '😂', '👀'];
            // 清除之前的动画
            container.innerHTML = '';

            // 创建30个掉落的图标 (增加数量)
            for (let i = 0; i < 30; i++) {
                setTimeout(() => {
                    const element = document.createElement('div');
                    element.className = 'falling-icon';

                    // 随机选择一个图标
                    const randomIcon = icons[Math.floor(Math.random() * icons.length)];
                    element.textContent = randomIcon;

                    // 随机水平位置，留出边距
                    element.style.left = 5 + Math.random() * 90 + '%';

                    // 随机起始延迟
                    element.style.animationDelay = (Math.random() * 0.8) + 's';

                    container.appendChild(element);

                    // 动画结束后移除元素
                    element.addEventListener('animationend', () => {
                        element.remove();
                    });
                }, i * 40); // 缩短图标创建间隔
            }
        },
        handlCloseTop() {
            this.showFnew = false;
            localStorage.setItem('IMG-DET-NYD', false);
        },
        async handleEmoj(e, _emoj) {
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            let res = {};
            if (this.emdata['em' + _emoj].praiseCount > 0) {
                res = await api.delPraise({ type: 1, praiseId: this.emdata['em' + _emoj].commentId });
                if (res.code == 0) {
                    this.emdata['em' + _emoj].praiseCount = 0;
                    this.emdata['em' + _emoj].num--;
                    this.clickByEmoji(e)
                }
            } else {
                res = await api.addEmoji({ imagesId: this.curImgId, content: this.emEnum[_emoj] })
                if (res.code == 0) {
                    this.createMixedAnimation();
                    this.emdata['em' + _emoj].commentId = res.data.praiseId;
                    this.emdata['em' + _emoj].praiseCount = 1;
                    this.emdata['em' + _emoj].num++;
                    this.clickByEmoji(e);
                }
            }
            if (res.code == 0) {
                this.tagVal = '';
                this.$amessage.success('感谢您的热情反应');
            }
        },
        clickByEmoji(e, count) {
            let wrapper = e.target;
            if (e.target.tagName == 'I') {
                wrapper = e.target.parentNode;
            }
            let iconElement = wrapper.querySelector('.icon');
            let countElement = wrapper.querySelector('.count');

            wrapper.classList.toggle('active');

            iconElement.classList.remove('icon-animation');
            void iconElement.offsetWidth;
            iconElement.classList.add('icon-animation');

            if (wrapper.classList.contains('active')) {
                // count++;
                this.createFloatingNumber(e, '+1');
            } else {
                // count--;
            }

            countElement.classList.remove('count-animation');
            void countElement.offsetWidth;
            countElement.classList.add('count-animation');

            // countElement.textContent = count;
        },
        createFloatingNumber(event, text) {
            let floatingNumber = document.createElement('div');
            floatingNumber.className = 'floating-number';
            floatingNumber.textContent = text;

            let wrapper = event.currentTarget;
            if (event.target.tagName == 'I') {
                wrapper = event.target.parentNode;
            }
            let iconElement = wrapper.querySelector('.icon');
            let rect = iconElement.getBoundingClientRect();

            floatingNumber.style.left = (rect.left + rect.width / 2) + 'px';
            floatingNumber.style.top = (rect.top - 10) + 'px';

            let appendEl = document.querySelector('.im-wrap-container');
            appendEl.appendChild(floatingNumber);

            floatingNumber.addEventListener('animationend', () => {
                floatingNumber.remove();
            });
        },
        async handleConfirmDel() {
            let id = this.comments[this.delIdx].id;
            let res = await api.delComment(id);
            if (res.code == 0) {
                this.comments.splice(this.delIdx, 1);
                this.$amessage.success('删除成功');
                this.showDel = false;
            }
        },
        handleShowRight() {
            this.showRight = !this.showRight;
            localStorage.setItem('S-IMG-R-BAR', this.showRight);
        },
        handleOp() {
            if (!this.isStop) {
                this.$refs['refDmCmt'].stop();
            } else {
                this.$refs['refDmCmt'].play();
            }
            this.isStop = !this.isStop;
        },
        handleShowFav() {
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            this.showFav = true;
        },
        handleIknow() {
            if (this.isFirstVisit) {
                this.isFirstVisit = false;
                localStorage.setItem('IS-F-VISIT', false);
            }
        },
        toTop() {
            $('.img-component').animate({
                'scrollTop': 0
            }, 0);
        },
        getRandomNumber(min, max) {
            return Math.random() * (max - min) + min;
        },
        getParticleCount() {
            const width = window.innerWidth;
            if (width <= 480) return this.fullScPraiseParam.CONFIG.particleCount.mobile;
            if (width <= 768) return this.fullScPraiseParam.CONFIG.particleCount.tablet;
            return this.fullScPraiseParam.CONFIG.particleCount.desktop;
        },
        createHearts(e) {
            const confettiContainer = document.createElement('div');
            confettiContainer.className = 'confetti-container';

            let _parent = document.querySelector('.im-wrap-container');
            _parent.appendChild(confettiContainer);

            const now = Date.now();
            if (this.fullScPraiseParam.isAnimating || now - this.fullScPraiseParam.lastTime < this.fullScPraiseParam.CONFIG.cooldown) return;

            this.fullScPraiseParam.isAnimating = true;
            this.fullScPraiseParam.lastTime = now;

            // showToast();

            //   const btn =e.target;
            let that = this;
            //   btn.style.animation = 'btn-success 0.5s ease';
            //   setTimeout(() => btn.style.animation = '', 500);

            const particleCount = this.getParticleCount();
            const viewportWidth = window.innerWidth;
            const spacing = viewportWidth / particleCount;

            const fragment = document.createDocumentFragment();
            let activeParticles = particleCount;

            for (let i = 0; i < particleCount; i++) {
                const heart = document.createElement('div');
                heart.className = 'heart';
                heart.textContent = '❤';

                const xPos = i * spacing + this.getRandomNumber(-20, 20);
                heart.style.left = `${xPos}px`;

                const duration = this.getRandomNumber(2, 3);
                heart.style.animationDuration = `${duration}s`;

                heart.addEventListener('animationend', () => {
                    heart.remove();
                    if (--activeParticles === 0) {
                        that.fullScPraiseParam.isAnimating = false;
                    }
                }, { once: true });

                fragment.appendChild(heart);
            }

            confettiContainer.appendChild(fragment);
        },
        createPlusOne(likeContainer) {
            const plus = document.createElement('div');
            plus.className = 'plus-one';
            plus.innerHTML = '<span style="color: #ffffff;">+</span><span style="color: #ffffff;">1</span>';
            plus.style.left = '50%';
            plus.style.top = '50%';
            plus.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

            likeContainer.appendChild(plus);
            // setTimeout(() => plus.remove(), 1000);
        },
        async handlePraise(e) {
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            if (this.info.praiseCount > 0) {
                let res = await api.delPraise({ type: 4, praiseId: this.curImgId });
                if (res.code == 0) {
                    this.info.praise--;
                    this.info.praiseCount = 0;
                    this.$amessage.success('取消喜欢~')
                }
            } else {
                let res = await api.addPraise({ type: 4, praiseId: this.curImgId });
                if (res.code == 0) {
                    this.createHearts(e.target);
                    this.createPlusOne(e.target);
                    this.$bhelper.addCirRecord('FAV');
                    this.$bhelper.addCirRecord('FAV-IMG');
                    this.$store.dispatch('setLeftMenu', [])
                    this.info.praise++;
                    this.info.praiseCount = 1;
                    this.$amessage.success('已喜欢，品味不错哦～')
                }
            }
        },
        onXsChoose(item, _idx) {
            this.info.color = [];
            this.isUseSelfSource = true;
            $('.img-wrap .outer-box').remove();
            this.showOuterBox = false;
            $('.img-component').animate(
                {
                    scrollTop: 0,
                },
                200
            )

            this.showIndex = 0;
            this.info.ratios = [];
            this.imgParams.last = '';
            this.curImgId = item.thumbnailBean.id;
            this.scrollLoaded = false;
            this.imgParams.page = 1;
            this.hasMore = true;
            this.viewdata = item;

            this.favIds = [item.id];
            // 打开时,修改当前 URL 为图片地址(但不跳转页面)
            history.pushState(null, null, `/imgv/${this.curImgId}`)
            this.initQuery();
        },
        toSearchByColor(clr) {
            let routeData = this.$router.resolve({
                path: '/screenshots?imageColor=' + encodeURIComponent(clr)
            })
            window.open(routeData.href, '_blank')
        },
        async handleAppendTag() {
            if (!this.tagVal) {
                this.$amessage.warn('未填写标签');
                return;
            }
            if (this.info.tagsArray.includes(this.tagVal)) {
                this.$amessage.warn('已经添加过此标签');
                return;
            }
            let res = await api.addImgTag({ id: this.curImgId, tags: this.info.tagsArray.join(',') + ',' + this.tagVal });

            if (res.code == 0) {
                this.info.tagsArray.push(this.tagVal);
                this.tagVal = '';
                this.$amessage.success('添加成功');
            }
        },
        handlXsSearch() {
            let that = this;
            //方法二
            let canvas = document.createElement('canvas');
            let img = document.createElement('img');
            // 解决跨域 Canvas 污染问题

            img.setAttribute("crossOrigin", '*');

            // that.isSearching = true;

            // that.isFocus = false;
            img.onload = function (e) {
                canvas.width = img.width;
                canvas.height = img.height;
                let context = canvas.getContext('2d');
                //绘制图片
                context.drawImage(img, 0, 0, img.width, img.height);
                canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

                const base64 = canvas.toDataURL('image/jpeg')
                localStorage.setItem('tmp_im_b64', base64);
                that.isFocus = false;
                // if (that.$route.name == 'searchByImageList') {
                //     location.href='/searchByImageList?t='+Date.parse(new Date())+'&similar='+that.curImgId
                //     // that.$router.replace({ path: '/searchByImageList?t='+Date.parse(new Date())+'&similar='+that.curImgId})
                // } else {
                let routeData = that.$router.resolve({ path: '/searchByImageList?t=' + Date.parse(new Date()) + '&similar=' + that.curImgId })
                window.open(routeData.href, '_blank');
                // }
                return;
            }
            //将资源链接赋值过去，才能触发img.onload事件
            img.src = this.info && this.info.thumbnailBean && this.info.thumbnailBean.thumbnail || this.$imgdomainurl + this.curImgId + '.webp';
        },
        onFavSucc() {
            this.showFav = false;
        },
        async handleAddComment() {
            let ckPass = this.$bhelper.checkLogin(this);
            if (!ckPass) return;
            if (!this.commentVal) {
                this.$amessage.warn('请输入评论内容~');
                return;
            }
            let res = await api.addComment({ type: 2, commentId: this.imgid, content: this.commentVal });
            if (res.code == 0) {
                res.data.member = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
                res.data.content = this.$bhelper.replace_em(res.data.content);
                this.comments = [...this.comments, ...[res.data]];
                if (this.comments.length > 1)
                    this.commentTotal = this.comments.length;
                this.commentVal = '';
                this.$amessage.success('你的神评论已发射！');
                if (this.isStop) {
                    this.isStop = false;
                    this.$refs['refDmCmt'].play()
                }
            }
        },
        handlePreviewImg(item) {
            // this.showOuterBox=false;
            // // this.viewidx=0;
            // this.sourcedatas = JSON.parse(JSON.stringify([item]))
            $('.game-con-info').animate(
                {
                    scrollTop: 0,
                },
                200
            )
            // this.viewImgUrl=item.src;
        },
        handleDownload() {
            //下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function () {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据'
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click", {
                    bubbles: true,
                    cancelable: true,
                    view: window
                }); // 创建一个单击事件
                a.download = name || "GAMEUI-PIC-" + Date.parse(new Date()); // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = this.viewImgUrl;
        },
        handleRotate() {
            this.rotate -= 90
            this.rotateNumber++
            if (this.rotateNumber % 2 == 0) {
            } else {
            }
        },
        handleSwitchBg() {
            if (this.themeIdx == this.themes.length - 1) this.themeIdx = 0
            else this.themeIdx++
            let val = this.themes[this.themeIdx]
            this.themeBg = val ? val : this.themes[0]
        },
        // 恢复默认大小
        handleAdapt() {
            this.isAdpt = !this.isAdpt
            let adptH = document.documentElement.clientHeight - 120
            if (this.isAdpt) {
                this.viewdata.h = adptH
                this.ratio = (parseFloat(adptH / this.imgdata.h) * 100).toFixed(0)
                this.viewdata.w = this.imgdata.w * (parseInt(this.ratio) / 100)
                this.viewdata.transx = (document.documentElement.clientWidth - (parseInt(this.ratio) / 100) * this.imgdata.w) / 2
                this.viewdata.transy = 60
            } else {
                this.viewdata.w = this.imgdata.w
                this.viewdata.h = this.imgdata.h
                this.viewdata.transx = (document.documentElement.clientWidth - this.viewdata.w) / 2
                this.viewdata.transy = 60
                this.ratio = 100
            }
        },
        // 重设基本参数
        handleReset() {
            if (!this.viewdata.w) this.viewdata.w = this.viewdata.width
            if (!this.viewdata.h) this.viewdata.h = this.viewdata.height
            this.ratioIdx = 6
            this.rotateNumber = 1
            this.themeBg = 'zdx-vmask-theme-two'
            this.themeIdx = 1
            this.rotate = 0
            this.isAdpt = true
            this.ratio = 100
            this.isSlick = false
            this.imgdata = this.viewdata
            this.viewdata = {
                w: this.viewdata.width,
                h: this.viewdata.height,
                transx: 0,
                transy: 0
            }
        },
        // 放大缩小
        handleScale(_type) {
            let ratio = parseInt(this.ratio)
            if (_type == '+') {
                if (this.ratioIdx == this.ratios.length - 1) return
                this.ratioIdx++
                ratio = this.ratios[this.ratioIdx]
                this.viewdata.w = this.imgdata.w * (ratio / 100)
                this.viewdata.h = this.imgdata.h * (ratio / 100)
            } else {
                if (this.ratioIdx <= 0) return
                this.ratioIdx--
                ratio = this.ratios[this.ratioIdx]

                this.viewdata.w = this.imgdata.w * (ratio / 100)
                this.viewdata.h = this.imgdata.h * (ratio / 100)
            }
            this.ratio = ratio
            this.viewdata.transx = (document.documentElement.clientWidth - (parseInt(ratio) / 100) * this.imgdata.w) / 2
            this.viewdata.transy = (document.documentElement.clientHeight - (parseInt(ratio) / 100) * this.imgdata.h) / 2
        },
        handleshowViewer() {
            this.handleReset() // 重设基本参数
            this.handleAdapt() // 恢复默认大小
            this.showViewer = true
        },
        imgPrev() {
            if (this.showIndex == 0) {
                this.$amessage.warn('没有更多了~')
                return;
            }
            this.$refs['refDmCmt'].stop();
            this.showIndex--;

            if (!this.isUseSelfSource) {
                this.info.ratios = this.olist[this.showIndex].ratios;
                this.curImgId = this.olist[this.showIndex].thumbnailBean.id;
                this.viewdata = this.olist[this.showIndex];
            } else {
                this.curImgId = this.list[this.showIndex].thumbnailBean.id;
                this.viewdata = this.list[this.showIndex];
            }

            this.scrollLoaded = false;
            this.imgParams.page = 1;
            this.imgParams.last = '';
            this.hasMore = true;
            // this.list = this.$bhelper.vlist;
            this.list =[];

            this.info = { article: {} };

            let nextImg = new Image()
            nextImg.src = this.getImgUrl(this.curImgId)
            this.viewImgUrl = nextImg.src;
            this.favIds = [this.curImgId];
            // 打开时,修改当前 URL 为图片地址(但不跳转页面)
            history.pushState(null, null, `/imgv/${this.curImgId}`)
            this.initQuery();
        },
        imgNext() {
            if (this.showIndex == this.olist.length - 1) {
                this.$amessage.warn('没有更多了~')
                return;
            }
            this.$refs['refDmCmt'].stop();
            this.showIndex++;

            if (!this.isUseSelfSource) {
                this.info.ratios = this.olist[this.showIndex].ratios;
                this.curImgId = this.olist[this.showIndex].thumbnailBean.id;
                this.viewdata = this.olist[this.showIndex];
            } else {
                this.curImgId = this.list[this.showIndex].thumbnailBean.id;
                this.viewdata = this.list[this.showIndex];
            }

            this.scrollLoaded = false;
            this.imgParams.page = 1;
            this.imgParams.last = '';
            this.hasMore = true;
            // this.list =this.$bhelper.vlist;
            this.list =[];

            this.info = { article: {} };

            let nextImg = new Image()
            nextImg.src = this.getImgUrl(this.curImgId)
            this.viewImgUrl = nextImg.src;

            this.favIds = [this.curImgId];
            // 打开时,修改当前 URL 为图片地址(但不跳转页面)
            history.pushState(null, null, `/imgv/${this.curImgId}`)
            this.initQuery();
        },
        async initQuery() {

            this.favIds = [this.curImgId];

            let nextImg = new Image()
            nextImg.src = this.getImgUrl(this.curImgId);

            this.viewImgUrl = nextImg.src;

            // const loading = this.$loading({
            //     lock: true,
            //     text: '努力加载中...',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            let that = this;
            api.imgNewInfo(this.curImgId).then(async res => {
                // debugger
                // loading.close();

                if (localStorage.getItem('token')) {
                    if (res.data) {
                        that.$bhelper.add(res.data, 'img');
                        that.$bhelper.addCirRecord('BROWSE');
                        that.$store.dispatch('setLeftMenu', [])
                    }
                }

                if (!res.data) {
                    res.data = { article: {}, color: [] };
                }

                let txtAres = await api.getImgTextsById(that.curImgId);
                res.data.tagsArray = txtAres.data.image.text.map(r => { return r.text; });

                that.info = res.data;

                if (that.olist && !that.isUseSelfSource) {
                    that.info.ratios = that.olist[that.showIndex].ratios;
                } else {
                    that.info.ratios = [];
                }

                res = await api.getComments({ type: 2, commentId: that.curImgId, pageNum: 1, pageSize: 999, orderByColumn: 'createTime', isAsc: 'desc' });
                res.data.map(item => {
                    item.content = that.$bhelper.replace_em(item.content);
                })
                that.comments = res.data;
                that.commentTotal = res.total;
                if (res.data.length > 0) {
                    this.isStop = false;
                    setTimeout(() => {
                        that.$refs['refDmCmt'].play();
                    }, 200)
                } else {
                    this.isStop = true;
                    setTimeout(() => {
                        that.$refs['refDmCmt'].stop();
                    }, 200)
                }

                res = await api.queryImgEmojCount(this.curImgId);
                let obj = { em1: { num: 0, praiseCount: 0 }, em2: { num: 0, praiseCount: 0 }, em3: { num: 0, praiseCount: 0 }, em4: { num: 0, praiseCount: 0 }, em5: { num: 0, praiseCount: 0 } };
                if (res.data && res.data.length > 0) {
                    let _em1 = res.data.filter(r => { return r.title == '[em_21]' });
                    let _em2 = res.data.filter(r => { return r.title == '[em_16]' });
                    let _em3 = res.data.filter(r => { return r.title == '[em_6]' });
                    let _em4 = res.data.filter(r => { return r.title == '[em_19]' });
                    let _em5 = res.data.filter(r => { return r.title == '[em_18]' });
                    if (_em1 && _em1.length > 0) {
                        obj.em1 = _em1[0];
                    }
                    if (_em2 && _em2.length > 0) {
                        obj.em2 = _em2[0];
                    }
                    if (_em3 && _em3.length > 0) {
                        obj.em3 = _em3[0];
                    }
                    if (_em4 && _em4.length > 0) {
                        obj.em4 = _em4[0];
                    }
                    if (_em5 && _em5.length > 0) {
                        obj.em5 = _em5[0];
                    }
                }
                that.emdata = obj;

            }).catch(res => {
                // debugger
                // loading.close();
            })

            this.querySimilarList();
        },
        startDm() {
            let that = this;
            that.$nextTick(() => {
                let els = document.getElementsByClassName('dm-text');
                let datas = [];
                els.forEach(item => {
                    datas.push({ right: 0 })
                })
                let elIdx = 0;
                setInterval(() => {
                    datas[elIdx].timer = setInterval(() => {
                        datas[elIdx].right += 10;
                        els[elIdx].style.right = datas[elIdx].right + 'px';
                        if (datas[elIdx].right >= 1000) {
                            clearInterval(datas[elIdx].timer);
                        }
                    }, 100);
                    elIdx++;
                }, 1500)
            })
        },
        loadMore(e) {
            this.handleIknow();
            let obj = $('.img-component');
            let _totalTop = obj.find('.top-bar').height() + obj.find('.b-img-box').height() + obj.find('.face-area').height() + obj.find('.img-comment-area').height() + 23;
            if (e.target.scrollTop >= _totalTop) {
                this.showFbar = true;
            } else {
                this.showFbar = false;
            }

            const { scrollTop, scrollHeight, clientHeight } = e.target;
            if (this.imgParams.last) {
                if (scrollTop + clientHeight >= scrollHeight - 100) {
                    if (!localStorage.getItem('token')) {
                        if (this.showLoginNum == 0) {
                            let parent = {};
                            if (location.href.indexOf('/imgv') > -1 && this.$route.name != 'imgv') {
                                parent = this.$parent.$parent.$parent.$parent;

                            } else if (this.$route.name == 'imgv') {
                                parent = this.$parent.$parent;
                            } else {
                                parent = this.$parent;
                            }
                            parent.noLoginIsTak = false;
                            parent.showLoginView = true;
                            this.showLoginNum = 1;
                            this.isloading = false;
                        }
                        return;
                    }
                    if (this.scrollLoaded && this.hasMore) {
                        this.scrollLoaded = false;
                        this.imgParams.page++;
                        this.querySimilarList();
                    }
                }
            } else {
                if (scrollTop + clientHeight >= scrollHeight - 770) {
                    if (!localStorage.getItem('token')) {
                        if (this.showLoginNum == 0) {
                            let parent = {};
                            if (location.href.indexOf('/imgv') > -1 && this.$route.name != 'imgv') {
                                parent = this.$parent.$parent.$parent.$parent;

                            } else if (this.$route.name == 'imgv') {
                                parent = this.$parent.$parent;
                            } else {
                                parent = this.$parent;
                            }
                            parent.noLoginIsTak = false;
                            parent.showLoginView = true;
                            this.showLoginNum = 1;
                            this.isloading = false;
                        }
                        return;
                    }
                    if (this.scrollLoaded && this.hasMore) {
                        this.scrollLoaded = false;
                        this.imgParams.page++;
                        this.querySimilarList();
                    }
                }
            }
        },
        // 获取原图地址
        getImgUrl(_id) {
            return `https://img.gameui.net/${_id}.webp`
        },
        // 获取图片地址
        getSrc(id, width, version = 0) {
            return `https://img.gameui.net/${id}-${version}@1x${width}.webp`
        },
        // 获取图片地址srcset
        getSrcset(id, width, version = 0) {
            const magnification = [1, 2, 3]
            return magnification.map((item) => {
                return `https://img.gameui.net/${id}-${version}@${item}x${width}.webp ${item}x`
            }).join(',')
        },
        handleClose() {
            this.$emit('close', this.info && this.info.article && this.info.article.id)
        },
        calculateTilt(corners) {
            const { x: x1, y: y1 } = corners[0];//左上
            const { x: x2, y: y2 } = corners[1];// 右上
            // 计算 dy 和 dx
            const dy = y2 - y1;
            const dx = x2 - x1;
            //计算倾角(弧度->角度)
            const angle = Math.atan2(dy, dx) * (180 / Math.PI);
            // 返回角度
            return angle;
        },
        // 更多相似图
        async querySimilarList() {
            let that = this;
            // const loading = this.$loading({
            //     lock: true,
            //     text: '努力加载中...',
            //     spinner: 'el-icon-loading',
            //     background: 'rgba(0, 0, 0, 0.7)'
            // });
            that.isloading = true;
            this.imgParams.similar = this.curImgId;
            if (this.imgParams.page == 1) {
                // this.list = this.$bhelper.vlist;
            }
            api.searchImgs(this.imgParams).then(res => {
                let list = res.data.images.list;


                if (list.length > 0)
                    that.imgParams.last = list[list.length - 1].id;

                list.forEach((item) => {
                    item.show=false;item.showOther=false;
                    that.$bhelper.convertImgItem(item, that);
                })


                if (that.imgParams.page == 1) {
                    that.list =list;
                }
                else{
                    that.list = [...that.list, ...list];
                }

                if (list.length < that.imgParams.pageSize)
                    that.hasMore = false;
                else
                    that.hasMore = true;

                setTimeout(()=>{
                    that.isloading = false;
                },300)
                setTimeout(()=>{
                    that.scrollLoaded = true;
                },1000)
            }).catch(res => {
                // debugger
                // loading.close();
            })
            // let result = await api.beSimilarList2(this.curImgId, this.imgParams);
            // loading.close();
            // let totalPage = result.total % that.imgParams.pageSize == 0 ? result.total / that.imgParams.pageSize : parseInt(result.total / that.imgParams.pageSize) + 1;
            // if (result.data && (result.list.length < that.imgParams.pageSize || that.imgParams.page >= totalPage)) {
            //     setTimeout(function () {
            //         that.hasMore = false
            //         that.nomore = true
            //     }, 1500)
            // } else {
            //     setTimeout(function () {
            //         that.hasMore = true
            //     }, 1500)
            // }
            // setTimeout(function () {
            //     that.scrollLoaded = true
            //     that.isLoadedImg = true
            // }, 1500)
        },
        keyupCallback(e){
            let that=this;
            if(!this.showViewer){
                if (e.keyCode == 27) {
                    that.handleClose();
                } else if(e.keyCode == 37){
                    that.imgPrev();
                } else if(e.keyCode == 39){
                    that.imgNext();
                }
            }
        }
    },
    destroyed(){
        window.removeEventListener('keyup',this.keyupCallback);
    },
    async mounted() {
        if (!localStorage.getItem('IMG-DET-NYD')) {
            this.showFnew = true;
        }
        if (!localStorage.getItem('S-IMG-R-BAR')) {
            this.showRight = true;
        } else {
            this.showRight = JSON.parse(localStorage.getItem('S-IMG-R-BAR'));
        }
        if (!localStorage.getItem('IS-F-VISIT')) {
            this.isFirstVisit = true;
        }
        if (localStorage.getItem('token')) {
            this.userId = localStorage.getItem('userId');
            this.currentUser = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
        }
        if(this.$route.name=='imgv'){
            $('#app').removeClass('b-has-adv');
            $('.t-adv').remove();
        }
        let id = this.imgid || this.$route.params.id || this.$route.query.id;
        if (id) {
            this.curImgId = id;

            this.initQuery();

            if (this.olist && this.olist.length > 0) {
                this.showIndex = this.viewidx;
                this.info.ratios = this.olist[this.viewidx].ratios;
                this.viewdata = this.olist[this.viewidx];

                window.addEventListener('keyup',this.keyupCallback)
            }
        }
    }
}
</script>

<style scoped lang="less">
.img-component {
    // height:100%;
    position: fixed;
    z-index: 111;
    width: 100%;
    height: 100%;
    // background: #111;
    top: 0px;
    left: 0px;
    // padding: 20px;
    padding-top: 20px;
    overflow-y: auto;

    .im-wrap-container {
        max-width: calc(100% - 122px);
        margin: 0 auto;
    }

    .top-bar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        // max-width: calc(100% - 100px);
        // border:1px solid red;
        // margin:0 auto;
        .top-back {
            width: 44px;
            height: 44px;
            background: url('../../assets/pro/gminfo_topback.svg') no-repeat;
            background-size: cover;
            transition: .2s all linear;

            &:hover {
                background: url('../../assets/pro/gminfo_topback_hover.svg') no-repeat;
                background-size: cover;
            }
        }

        .right-funs {
            line-height: 44px;
            display: flex;
            user-select: none;
            align-items: center;
            position: relative;
            // border:1px solid red;
            width:100%;
            justify-content: center;
            .rfwrap{
                line-height: 44px;
                display: flex;
                position: relative;
            }
            .btn {
                font-size: 14px;
                color: #fff;
                font-weight: 500;
                line-height: 44px;
                background-color: #242327;
                border-radius: 8px;
                margin-right: 10px;
                padding: 0px 10px 0px 33px;
                min-width: 99px;
                transition: background-color .2s ease;
                position: relative;
                text-align: center;

                &:hover {
                    background-color: #42404a;
                }
            }

            .clear-redborder {
                background-image: url('../../assets/pro/imginfo/clear_rbd.svg');
                background-repeat: no-repeat;
                background-size: 18px 18px;
                background-position: 13px center;
            }

            .bw-preview {
                background-image: url('../../assets/pro/imginfo/bw_preview.svg');
                background-repeat: no-repeat;
                background-size: 18px 18px;
                background-position: 13px center;
            }

            .img-search-to-img {
                background-image: url('../../assets/pro/imginfo/img_search_to_img.svg');
                background-repeat: no-repeat;
                background-size: 18px 18px;
                background-position: 20px center;
            }

            .download {
                background-image: url('../../assets/pro/imginfo/download.svg');
                background-repeat: no-repeat;
                background-size: 18px 18px;
                background-position: 10px center;
                min-width: 72px;
            }

            .fav-btn {
                background: #11CCB1;
                color: #fff;
                background-image: url('../../assets/pro/imginfo/fav.svg');
                background-repeat: no-repeat;
                background-size: 18px 18px;
                background-position: 10px center;
                border-radius: 8px;
                width: 72px;
                padding-right: 10px;
                padding-left: 30px;
                text-align: center;
                margin-right: 10px;
                transition: .1s all linear;

                &:hover {
                    background-color: #0fab94;
                }
            }

            .like-btn {
                border-radius: 8px;
                padding: 0px 10px;
                background-image: url('../../assets/pro/img_like.svg');
                background-repeat: no-repeat;
                background-position: 10px center;
                // background-color:#1C1C1E;
                padding-left: 30px;

                i {
                    color: #969696;
                    font-style: normal;
                    margin-left: 5px;
                }

                &.active {
                    background-image: url('../../assets/pro/icon_liked.svg');
                    background-repeat: no-repeat;
                    background-position: 10px center;
                }
            }

            .close-modal-page {
                width: 44px;
                height: 44px;
                // background: url('../../assets/pro/img_page_close.svg') no-repeat;
                // background-size: cover;
                // margin-left:20px;
                position: absolute;
                right: 0px;
                font-size: 24px;
                transition: .2s all linear;
                text-align: center;
                background-color: #242327;
                border-radius: 8px;

                &:hover {
                    // opacity:.8;
                    background-color: #42404a;
                }
            }
        }
    }

    .b-img-box {
        margin: 0 auto;
        margin-top: 23px;
        // overflow: hidden;
        position: relative;

        .collapse-img-rbar {
            position: absolute;
            right: 17px;
            top: 25px;
            z-index: 103;
            width: 22px;
            height: 22px;
            background: url('../../assets/pro/img_right_collapse.svg') no-repeat;
            background-size: cover;
        }

        .im-wrap {
            display: flex;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #2D2D2D;
            height: calc(100vh - 250px);

            &.hidden-rparea {
                .left-m-img {
                    width: 100%;
                }

                .r-propertys {
                    display: none;
                    width: 0px;
                    padding: 0px;
                    min-width: 0px;
                }
            }

            &.show {
                .left-m-img {
                    width: calc(100% - 323px - 23px);
                }

                .r-propertys {
                    width: 346px;
                    // margin-left: 23px;
                    padding: 20px;
                }
            }
        }

        .left-m-img {
            display: flex;
            // align-items: center;
            // justify-content: center;
            background: #111;
            // max-height: 674px;
            // height: 674px;
            overflow: hidden;
            position: relative;
            transition: width .2s ease-in-out;

            // align-items: center;
            justify-content: center;

            .dm-text {
                position: absolute;
                top: 0px;
                right: 0px;
                transition: .1s all linear;
            }

            @keyframes slideIn {
                from {
                    transform: translateX(-100%);
                    opacity: 0;
                }

                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }

            .img-color-wrap {
                height: max-content;
                border-radius: 22px;
                min-width: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                height: 300px;
                z-index: 104;
                left: 11px;
                top: 10px;
            }

            .img-colors {
                background: rgba(20, 20, 28, 0.45);
                backdrop-filter: blur(8px) saturate(180%);
                -webkit-backdrop-filter: blur(8px) saturate(180%);
                border-radius: 22px;
                width: 44px;
                height: 300px;
                justify-content: center;
                align-items: center;
                position: absolute;
                left: 11px;
                top: 10px;
                z-index: 104;
                animation: slideIn 0.5s ease-out;
                // position: relative;

                // margin-left:11px;
                // margin-top:10px;
                display: flex;
                flex-direction: column;
                grid-gap: 8px;

                a {
                    width: 24px;
                    height: 24px;
                    border-radius: 24px;
                    position: relative;
                    z-index: 1;
                }

                // &:before{
                //     content:'';
                //     padding-left:10px;
                //     position: absolute;
                //     border-radius:24px;
                //     width:44px;
                //     height:204px;
                // }
            }

            .img-wrap {
                // height: 100%;
                // position: relative;
                // width:100%;
                // // width:calc(100% - 44px);
                // display: flex;
                // justify-content: center;
                // align-items: center;
                // z-index:102;
                display: flex;
                align-items: center;
                justify-content: center;

                // max-height: 674px;
                // height: 674px;
                // overflow: hidden;
                .n-box-wrap {
                    // height:100%;

                    // display: flex;
                    // justify-content: center;
                    // align-items: center;
                }

                .n-box {
                    position: relative;
                    // height:max-content;
                    // max-height: 674px;
                    // height: 674px;
                    // height:100%;
                }

                img {
                    max-height: calc(100vh - 250px);
                    // height: 100%;
                    transition: none;
                    cursor: zoom-in;
                    // object-fit: contain;
                }
            }
        }

        .r-propertys {
            // min-width: 323px;
            // width: 323px;
            // margin-left: 23px;
            // padding: 20px;
            background: #171717;
            transition: width .1s linear;

            .title {
                font-size: 24px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 33px;
                max-width: 90%;
                display: inline-block;

                .cir {
                    content: '';
                    min-width: 14px;
                    height: 14px;
                    background: url('../../assets/pro/allow_take.svg') no-repeat;
                    background-position: center center;
                    padding-right: 27px;
                }
            }

            .cate {
                color: #969696;
                font-size: 12px;
                margin-top: 2px;

                a {
                    &:hover {
                        color: #11CCB1;
                        text-decoration: underline;
                    }
                }
            }

            .tag-tit {
                margin-top: 34px;

                .text {
                    font-size: 16px;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 22px;
                    margin-bottom: 16px;
                }

                .tags-wrap {
                    padding-right: 10px;
                    // max-height: 492px;
                    max-height: calc(100vh - 417px);
                    overflow-y: auto;

                    &:hover {
                        &::-webkit-scrollbar {
                            display: inherit;
                        }
                    }

                    &::-webkit-scrollbar {
                        width: 6px;
                        height: 8px;
                        background-color: transparent;
                        display: none;
                    }

                    /*滚动条的轨道*/
                    &::-webkit-scrollbar-track {
                        background-color: transparent;
                    }

                    /*滚动条的滑块按钮*/
                    &::-webkit-scrollbar-thumb {
                        border-radius: 3px;
                        background-color: #626262;
                    }

                    /*滚动条的上下两端的按钮*/
                    &::-webkit-scrollbar-button {
                        height: 0;
                    }

                    /* 两个滚动条的交汇处 */
                    &::-webkit-scrollbar-corner {
                        background-color: transparent;
                    }

                    .tags-box {
                        font-size: 16px;
                        user-select: none;

                        a {
                            line-height: 40px;
                            border-radius: 8px;
                            border: 1px solid #2D2D2D;
                            display: inline-block;
                            width: 100%;
                            margin-bottom: 10px;
                            color: #969696;
                            padding-left: 20px;
                            cursor: pointer;
                            transition: .1s all linear;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;

                            &:hover {
                                background: #2D2D2D;
                            }
                        }
                    }
                }
            }
        }


        .img-prev {
            width: 40px;
            height: 40px;
            background: url('../../assets/pro/img_prev.svg') no-repeat;
            background-size: cover;
            border-radius: 40px;
            border: none;
            cursor: pointer;
            position: absolute;
            left: -51px;
            top: calc((100% - 40px) / 2);

            &:hover {
                background: url('../../assets/pro/img_prev_active.svg') no-repeat;
                background-size: cover;
            }
        }

        .img-next {
            width: 40px;
            height: 40px;
            background: url('../../assets/pro/img_next.svg') no-repeat;
            background-size: cover;
            border-radius: 40px;
            cursor: pointer;
            border: none;
            position: absolute;
            top: calc((100% - 40px) / 2);
            right: -51px;

            &:hover {
                background: url('../../assets/pro/img_next_active.svg') no-repeat;
                background-size: cover;
                border: none;
            }
        }

    }

    .face-area {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        margin-top: 20px;

        .l-face-area {
            display: flex;
            align-items: center;

            .face-con {
                height: 44px;
                line-height: 44px;
                border-radius: 22px;
                background: #292929;
                // width: 216px;
                margin-left: 20px;

                .icon {
                    font-size: 22px;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .icon-wrapper:hover .icon {
                    transform: scale(1.2) translateY(-2px);
                    filter: brightness(1.2);
                }

                .icon-wrapper:hover .count {
                    transform: scale(1.1);
                    color: rgba(255, 255, 255, 0.95);
                }

                .count {
                    color: rgba(255, 255, 255, 0.8);
                    font-size: 14px;
                    font-weight: 500;
                    // min-width: 24px;
                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .icon-wrapper:active {
                    transform: scale(0.85);
                }

                .icon-wrapper:active::after {
                    opacity: 1;
                    transform: scale(1);
                }

                .icon-wrapper.active {
                    background: rgba(249, 18, 93, 0.1);
                }

                .icon-wrapper.active::before {
                    opacity: 1;
                }

                @keyframes countPop {
                    0% {
                        transform: scale(0.8);
                        opacity: 0.5;
                    }

                    50% {
                        transform: scale(1.4);
                    }

                    100% {
                        transform: scale(1);
                        opacity: 1;
                    }
                }

                .count-animation {
                    animation: countPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                @keyframes iconPop {
                    0% {
                        transform: scale(1);
                    }

                    50% {
                        transform: scale(1.3) translateY(-4px);
                    }

                    100% {
                        transform: scale(1);
                    }
                }

                .icon-animation {
                    animation: iconPop 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                }

                .thumb {
                    color: #ffd700;
                }

                .heart {
                    color: #ff4f4f;
                }

                .party {
                    color: #8a2be2;
                }

                .glasses {
                    color: #00bfff;
                }

                .icon-wrapper.active .icon {
                    filter: brightness(1.3);
                }

                .icon-wrapper:hover .icon {
                    text-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
                }

                @keyframes floatUp {
                    0% {
                        opacity: 0;
                        transform: translate(-50%, 0) scale(0.5);
                    }

                    20% {
                        opacity: 1;
                        transform: translate(-50%, -20px) scale(1.2);
                    }

                    100% {
                        opacity: 0;
                        transform: translate(-50%, -60px) scale(1);
                    }
                }
            }

            .send-mbox {
                display: flex;
                align-items: center;
                // margin-top: 17px;

                .u-img {
                    min-width: 34px;
                    height: 34px;
                    border-radius: 34px;
                    overflow: hidden;
                    margin-right: 12px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .right {
                    width: 100%;
                    position: relative;
                    display: flex;
                    align-items: center;

                    input {
                        background: #242327;
                        width: 100%;
                        border: none;
                        border: none;
                        line-height: 44px;
                        padding-left: 16px;
                        font-size: 14px;
                        color: #fff;
                        border-radius: 22px;
                        padding-right: 100px;
                        border: 1px solid transparent;
                        transition: .1s all linear;

                        &:focus {
                            border: 1px solid #11CCB1;
                        }
                    }

                    .opbtns {
                        position: absolute;
                        right: 0px;
                        display: flex;
                        align-items: center;

                        .face-btn {
                            width: 20px;
                            height: 20px;
                            background: url('../../assets/pro/top_cmt_face.svg') no-repeat;
                            background-size: cover;
                            display: flex;
                            align-items: center;
                            margin-right: 13px;

                            &:after {
                                content: '';
                                width: 1px;
                                background: #484848;
                                height: 18px;
                                margin: 0px 13px;
                                position: absolute;
                                left: 20px;
                            }

                            &:hover {
                                background: url('../../assets/pro/top_cmt_face_active.svg') no-repeat;
                                background-size: cover;
                            }
                        }

                        .send-btn {
                            width: 24px;
                            height: 24px;
                            background: url('../../assets/pro/top_cmt_sendbtn.svg') no-repeat;
                            background-size: cover;
                            margin-left: 13px;
                            margin-right: 15px;
                            display: flex;
                        }
                    }
                }
            }
        }

        .author-info {
            display: flex;
            align-items: center;

            .img-box {
                width: 34px;
                height: 34px;
                border-radius: 17px;
                overflow: hidden;
                display: block;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .user {
                display: flex;
                flex-direction: column;
                margin-left: 10px;

                .name {
                    font-size: 14px;
                    color: #fff;
                    font-weight: 500;
                    // margin-left: 10px;
                }
            }

            .collect-tip {
                font-size: 12px;
                line-height: 17px;
                // margin-top: 10px;
                display: block;
                // background: url('../../assets/pro/imginfo/collect_to.svg') no-repeat;
                background-size: 18px 18px;
                background-position: left center;
                // padding-left: 28px;
                color: #969696;
            }
        }
    }

    .other-tit {
        font-size: 26px;
        font-weight: 500;
        line-height: 37px;
        text-align: center;
        margin-top: 12px;
    }

    .mk-rd-datas {
        margin-top: 30px;

        .h-cover-ditem {
            width: 312px;

            .cover-box {
                display: flex;

                .mlft {
                    width: 204px;
                    min-width: 204px;
                    height: 210px;
                    border-radius: 16px;
                    margin-right: 6px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .mrt {
                    .m-cover-bx {
                        width: 102px;
                        height: 102px;
                        border-radius: 16px;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }

                        &:first-child {
                            margin-bottom: 6px;
                        }
                    }
                }
            }

            .u-bx {
                display: flex;
                align-items: center;
                margin-top: 8px;

                .avatar {
                    width: 20px;
                    height: 20px;
                    object-fit: cover;
                    margin-right: 7px;
                    border-radius: 20px;
                }

                .name {
                    font-size: 14px;
                    color: #969696;
                }
            }
        }

        .waf-ligan-item {
            position: absolute;
            top: 10px;
            left: 10px;
            right: 10px;
            bottom: 10px;
            font-size: 1.2em;
            border: 2px solid #000;
            border-radius: 16px;
            transition: 0.1s all linear;
            overflow: hidden;

            &:hover {
                cursor: pointer;
                border: 2px solid #11CCB1;

                .hid-btn {
                    display: inherit;
                }
            }

            .m-img {
                border-radius: 16px;
                height: 100%;
                width: 100%;
                object-fit: cover;
            }

            .author {
                position: absolute;
                bottom: 11px;
                left: 10px;
                // background: rgba(255, 255, 255, 0.9);
                border-radius: 12px;
                // padding: 10px 13px;
                width: 164px;
                cursor: default;

                .ar-tit {
                    font-size: 14px;
                    font-weight: 500;
                    color: #fff;
                    line-height: 20px;
                    // margin-bottom: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    background: url('../../assets/pro/take_tit_icon.svg') no-repeat;
                    background-position: left center;
                    padding-left: 22px;
                    display: inline-block;
                    width: 100%;
                }

                .u-box {
                    display: flex;
                    padding-left: 20px;

                    .name {
                        font-size: 14px;
                        color: #969696;
                        font-weight: 500;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .avatar {
                        width: 20px;
                        height: 20px;
                        border-radius: 20px;
                        margin-right: 7px;
                    }
                }
            }

            .like-icon-btn {}

            .select-btn {
                width: 20px;
                height: 20px;
                position: absolute;
                left: 10px;
                top: 10px;
                background: url('../../assets/pro/mutiple_select_pic.svg') no-repeat;
                background-size: cover;

                &.active {
                    background: url('../../assets/pro/mutiple_selected_pic.svg') no-repeat;
                    background-size: cover;
                }
            }

            .global-img-fun-pos {
                position: absolute;
                top: 10px;
                right: 10px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                // width: 100%;

                .fav-btn {
                    background-color: #11CCB1;
                    color: #fff;
                    width: 40px;
                    height: 40px;
                    // width:82px;
                    // position: absolute;
                    // top: 10px;
                    // right: 10px;
                    font-size: 14px;
                    border-radius: 12px;
                    cursor: pointer;
                    background-image: url('../../assets/pro/un_favicon.svg');
                    background-repeat: no-repeat;
                    background-position: center;

                    // padding-left: 35px;
                    // padding-right: 12px;
                    &:hover {
                        // background-color: #f34972;
                    }
                }

                .global-parise-btn {
                    height: 40px;
                    line-height: 40px;
                    padding: 0px 10px 0px 11px;
                    border-radius: 12px;
                    font-size: 12px;
                    margin-left: 10px;
                    color: #171717;
                    display: inline-block;
                    background: rgba(255, 255, 255, 0.9);
                    background-image: url('../../assets/pro/global_img_parise.svg');
                    background-repeat: no-repeat;
                    background-position: calc(100% - 10px) center;
                    min-width: 53px;

                    // position: absolute;
                    // right:10px;
                    // top:10px;
                    &.active {
                        background-image: url('../../assets/pro/global_img_parise_active.svg');
                        background-repeat: no-repeat;
                        background-position: calc(100% - 10px) center;
                    }
                }
            }

            // .faved-btn {
            //     background-color: #fff;
            //     color: #000;
            //     height: 44px;
            //     line-height: 44px;
            //     // width:82px;
            //     // position: absolute;
            //     // top: 10px;
            //     // right: 10px;
            //     font-size: 14px;
            //     border-radius: 12px;
            //     background-image: url('../../assets/pro/faved_icon.svg');
            //     background-repeat: no-repeat;
            //     background-position: 11px center;
            //     // padding-left: 35px;
            //     // padding-right: 12px;
            //     // opacity: 0.9;
            //     &:hover {
            //       // opacity: 1;
            //     }
            // }
            .xs-img-btn {
                background-image: url('../../assets/pro/xs_img_cion.svg');
                background-repeat: no-repeat;
                background-position: center center;
                width: 34px;
                height: 34px;
                position: absolute;
                right: 10px;
                bottom: 11px;
                background-color: #fff;
                border-radius: 12px;
                cursor: pointer;
                opacity: 0.9;

                &:hover {
                    opacity: 1;
                }
            }

            .hid-btn {
                display: none;
            }

            .hid-el {
                // display: none;
                transition: 0.1s all linear;
                opacity: 0;
            }

            .bot-mask {
                background: linear-gradient(transparent, #000);
                position: absolute;
                width: 100%;
                height: 50%;
                bottom: 0;
                left: 0;
                z-index: -1;
                transition: all 0.2s linear;
            }

            &:hover {
                border: 2px solid #11CCB1;

                .bot-mask {
                    z-index: 1;
                }

                .hid-el {
                    // display: inline-block;
                    opacity: 1;
                    z-index: 2;
                }
            }

            &.active {
                border: 2px solid #11CCB1;

                .select-btn {
                    // display: inline-block;
                    opacity: 1;
                }
            }
        }

    }
}

.l-face-area {
    position: relative;

    .face-con {
        display: flex;
        align-items: center;
        grid-gap: 17px;
        padding: 7px 15px;

        a {
            display: flex;
            align-items: center;
            height: 31px;
            border-radius: 15.5px;
            transition: .2s all linear;
            color: #969696;
            font-size: 12px;

            &.active {
                padding: 5px 9px 5px 8px;
                color: #fff;
                position: relative;
                overflow: hidden;

                i {
                    margin-right: 3px;
                }

                &:after {
                    content: '';
                    background: #11CCB1;
                    position: absolute;
                    left: 0px;
                    right: 0px;
                    top: 0px;
                    bottom: 0px;
                    z-index: 1;
                    opacity: .2;
                }
            }
        }

        i:first-child {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            transition: .2s all linear;

            &:hover {
                transform: scale(1.2);
            }
        }

        i {
            position: relative;
            z-index: 2;
        }

        i:last-child {
            color: #fff;
            font-style: normal;
        }

        .emoj-18 {
            background: url('../../assets/pro/emoj/18.svg') no-repeat;
            background-size: 20px 20px;
            background-position: left center;
        }

        .emoj-10 {
            background: url('../../assets/pro/emoj/10.svg') no-repeat;
            background-size: 20px 20px;
            background-position: left center;
        }

        .emoj-16 {
            background: url('../../assets/pro/emoj/16.svg') no-repeat;
            background-size: 20px 20px;
            background-position: left center;
        }

        .emoj-6 {
            background: url('../../assets/pro/emoj/6.svg') no-repeat;
            background-size: 20px;
            background-position: left center;
        }

        .emoj-24 {
            background: url('../../assets/pro/emoj/24.svg') no-repeat;
            background-size: 20px 20px;
            background-position: left center;
        }
    }
}

.att-new-tags {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #626262;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px;
    margin-bottom: 10px;
    height: 40px;

    &:focus {
        border-color: #11CCB1;
    }

    input {
        background: #171717;
        color: #fff;
        line-height: 40px;
        border: none;
    }

    .btn {
        line-height: 28px;
        background: #11CCB1;
        border-radius: 4px;
        padding: 0px 12px;
        transition: .2s all linear;
        user-select: none;

        &:active {
            opacity: .8;
        }
    }
}

.ag-tags {
    .label {
        font-size: 14px;
        color: #fff;
        margin-bottom: 16px;
    }

    .tags {
        display: flex;
        grid-gap: 15px;
        flex-wrap: wrap;

        a {
            line-height: 30px;
            border-radius: 15px;
            padding: 0px 15px;
            background-color: #37363E;
            white-space: nowrap;
            color: #fff;
            font-size: 14px;

            &:hover {
                opacity: .8;
            }
        }
    }
}
</style>